function TableHeader(props) {
    return (<thead>
        <tr>
            <th>

            </th>
            <th>
                书籍名称
            </th>
            <th>
                出版日期
            </th>
            <th>
                价格
            </th>
            <th>
                购买数量
            </th>
            <th>
                操作
            </th>
        </tr>
    </thead>)
}

class Book {
    constructor(id, name, publishTime, price, number) {
        this.id = id
        this.name = name
        this.publishTime = publishTime
        this.price = price
        this.number = number
    }
}

class ShoppingCar extends React.Component {

    constructor() {
        super()
        this.onCellReduce = this.onCellReduce.bind(this)
        this.onCellPlus = this.onCellPlus.bind(this)
        this.onCellDelete = this.onCellDelete.bind(this)

        var bookArray = []
        let book1 = new Book("1", "<算法导论>", "2006-9", "85.00", "10")
        let book2 = new Book("2", "<UNIX编程艺术>", "2006-2", "59.00", "6")
        let book3 = new Book("3", "<编程珠玑>", "2008-10", "39.00", "2")
        let book4 = new Book("4", "<代码大全>", "2006-3", "128.00", "3")
        bookArray.push(book1)
        bookArray.push(book2)
        bookArray.push(book3)
        bookArray.push(book4)

        var totalAmount = this.qureyTotalAmount(bookArray)

        this.state = {
            bookArray: bookArray,
            totalPrice: totalAmount
        }
    }

    render() {
        const { bookArray } = this.state
        let content;
        if (bookArray.length == 0) {
            content = <h1>购物车为空</h1>;
        } else {
            content = <div>
                <table border="1">
                    <TableHeader />
                    <tbody>
                        {
                            bookArray.map((book, index) => {
                                return <ShopCarCell book={book} key={index}
                                    onCellReduce={this.onCellReduce}
                                    onCellPlus={this.onCellPlus}
                                    onCellDelete={this.onCellDelete} />
                            })
                        }
                    </tbody>
                </table>
                <h3>总价格：{this.formatPrice(this.state.totalPrice)}</h3>
            </div>;
        }

        return (
            <div>
                {content}
            </div>
        )
    }

    qureyTotalAmount(bookArray) {
        var totalAmount = 0
        bookArray.forEach(book => {
            totalAmount += parseFloat(book.price) * parseFloat(book.number)
        });
        return totalAmount
    }

    onCellReduce(number, bookId) {
        this.onCellCaculate(number, bookId, false)
    }

    onCellPlus(number, bookId) {
        this.onCellCaculate(number, bookId, true)
    }

    onCellCaculate(number, bookId, isPlus) {
        var bookArray = this.state.bookArray
        let array = bookArray.map((book) => {
            if (book.id === bookId) {
                let num = parseInt(number)
                if (isPlus) {
                    num = num + 1
                } else {
                    num = num - 1
                }

                if (num >= 1) {
                    book.number = num.toString()
                }
            }
            return book
        })

        console.log(array)
        var totalAmount = this.qureyTotalAmount(array)
        this.setState({
            bookArray: array,
            totalPrice: totalAmount
        })
    }

    onCellDelete(bookId) {
        var bookArray = this.state.bookArray
        let array = bookArray.filter((book) => {
            if (book.id !== bookId) {
                return true
            } else {
                return false
            }
        })
        console.log(array)
        var totalAmount = this.qureyTotalAmount(array)
        this.setState({
            bookArray: array,
            totalPrice: totalAmount
        })
    }

    formatPrice(price) {
        if (typeof price !== "number") {
            price = Number(price) || 0;
        }
        return "¥ " + price.toFixed(2);
    }
}

class ShopCarCell extends React.Component {

    constructor(props) {
        super(props)
        this.onCounterReduce = this.onCounterReduce.bind(this)
        this.onCounterPlus = this.onCounterPlus.bind(this)
        this.onDelete = this.onDelete.bind(this)
    }

    render() {
        let book = this.props.book
        return (
            <tr>
                <td>{book.id}</td>
                <td>{book.name}</td>
                <td>{book.publishTime}</td>
                <td>￥{book.price}</td>
                <td>
                    <CounerView number={book.number}
                        onCounterReduce={this.onCounterReduce}
                        onCounterPlus={this.onCounterPlus} />
                </td>
                <td>
                    <button onClick={this.onDelete}>移除</button>
                </td>
            </tr>
        )
    }

    onCounterReduce(number) {
        console.log("cell reduce=", number, this.props.book.id)
        this.props.onCellReduce(number, this.props.book.id)
    }

    onCounterPlus(number) {
        this.props.onCellPlus(number, this.props.book.id)
    }

    onDelete() {
        console.log("delete", this.props.book.id)
        this.props.onCellDelete(this.props.book.id)
    }
}

class CounerView extends React.Component {

    constructor(props) {
        super(props)
        this.reduce = this.reduce.bind(this)
        this.plus = this.plus.bind(this)
    }

    render() {
        return (
            <div>
                <button onClick={this.reduce}>-</button>
                <span className="counter">{this.props.number}</span>
                <button onClick={this.plus}>+</button>
            </div>
        )
    }

    reduce() {
        console.log("reduce=", this.props.number)
        this.props.onCounterReduce(this.props.number)
    }

    plus() {
        this.props.onCounterPlus(this.props.number)
    }

}

let rootContainer = document.getElementById("root")
ReactDOM.render(
    <ShoppingCar />,
    rootContainer
)